<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>父子组件传值</title>
	<script src="js/vue.js"></script>
</head>

<body>
	<!-- 单向数据流 -->
	<div id="root">
		<counter :count="1" @parent_change="parent_change"></counter>
		<counter :count="1" @parent_change="parent_change"></counter>
		<div>{{total}}</div>
	</div>
</body>
<script type="text/javascript">
	var counter = {
		props: ['count'],
		data: function () {
			return {
				number: this.count
			}
		},
		template: '<div @click="handleChildClick">{{number}}</div>',
		methods: {
			handleChildClick: function () {
				this.number += 2;
				this.$emit("parent_change", 2);
			}
		}
	}
	var vm = new Vue({
		el: "#root",
		components: {
			counter: counter,
		},
		data: {
			total: 2
		},
		methods: {
			parent_change: function (number) {
				this.total += 2;
			}
		}
	})
</script>

</html>
